<template>
  <div class="report-cell" :class="active===index?'active':''" @click="changeActive">
    <div class="report-info">

      <h4 class="name"> <span
          :class="{'p':source.level===0,'s':source.level===1,'f':source.level===-1}">{{ source.areaName }}</span></h4>
      <div class="item confirm">总确诊人数: {{ !source.confirm ? '未知' : source.confirm }}</div>
      <div class="item store-confirm">现存确诊人数: {{ !source.storeConfirm ? '未知' : source.storeConfirm }}</div>
      <!--      <div class="item heal">治愈人数: {{ !source.heal ? '未知' : source.heal }}</div>-->
      <!--      <div class="item dead">死亡人数: {{ !source.dead ? '未知' : source.dead }}</div>-->
      <!--      <div class="item input">境外输入: {{ !source.input ? '未知' : source.input }}</div>-->
      <div class="item update-date"> {{ source.searchTime }}</div>


    </div>
  </div>
</template>

<script>
import {mapMutations, mapState} from "vuex";

export default {
  name: "ReportCell",
  data() {
    return {
      time: null
    }
  },
  props: {
    index: {
      type: Number,
    },
    source: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    ...mapState(['active','show'])
  },
  methods: {
    ...mapMutations(['setActive','setShow']),
    changeActive() {
      if (this.active === this.index) {
        this.setActive(null)
        this.setShow(false)
      } else {
        this.setActive(this.index);
      }

    }
  }
}
</script>

<style lang="less">
.report-cell {
  cursor: pointer;
  margin-bottom: 20px;
  margin-top: 20px;
  height: 120px;
  width: 100%;
  border-radius: 12px;
  box-shadow: var(--un-box-shadow);
  color: #1d1d1d;

  .name {
    padding: 10px 0 5px 0;
    width: 90%;
    font-size: 18px;
    margin: auto;
    height: 36px;
    overflow: hidden;
    text-align: center;
  }

  .p {
    color: #000000;
  }

  .s {
    color: #85858f;
  }

  .f {
    color: #961d1d;
  }
}

.item {
  padding: 2px;
}

.active {
  background-color: rgba(229, 212, 212, 0.2);
  box-shadow: var(--un-box-active-shadow);
}

//.store-confirm {
//  color: #e7344b;
//}
//
//.heal {
//  color: #1685b1;
//}
.update-date {
  padding-top: 10px;
  font-weight: 100;
  font-size: 10px;
}

.dot {
  width: 10px;
  padding-left: 10px;
  position: relative;
  float: left;
}
</style>